<template>
  <div>
    <div class="detail" v-if="Detail">
      <div class="van-nav-bar van-nav-bar--fixed van-hairline--bottom">
        <div class="van-nav-bar__content">
          <a class="van-nav-bar__left" href="javascript:history.go(-1)">
            <i class="van-icon van-icon-arrow-left van-nav-bar__arrow iconfont">
              <!---->&#xe607;
            </i>
          </a>
          <div class="van-nav-bar__title van-ellipsis">商品详情</div>
          <div class="van-nav-bar__right">
            <i
              class="van-icon van-icon-star iconfont"
              style="color: rgb(204, 204, 204); font-size: 18px"
            >
              <!---->&#xe612;
            </i>
          </div>
        </div>
      </div>
      <div class="banner">
        <!----><!---->
        <div class="van-swipe">
          <van-swipe @change="onChange" >
            <van-swipe-item v-for="(item,index) in Detail.galleries" :key="index">
              <img
                :src="
                  'https://caiba-produce.oss-cn-beijing.aliyuncs.com/' +
                  item.path
                "
                alt=""
              />
            </van-swipe-item>
            <template #indicator>
              <div class="custom-indicator">
                {{ current + 1 }}/{{ Detail.galleries.length }}
              </div>
            </template>
          </van-swipe>
        </div>
      </div>
      <!-- 加入购物车模块 -->
      <div class="van-goods-action" style="z-index: 100">
        <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服" dot />
          <van-goods-action-icon url="/cart" icon="cart-o" text="购物车" badge="5" />
          <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
          <van-goods-action-button
            type="warning"
            @click="show=true"
            text="加入购物车"
          />
          <van-goods-action-button
            type="danger"
            @click="show=true"
            text="立即购买"
          />
        </van-goods-action>
      </div>
      <div class="det-name">
        <!---->
        <div class="price">
          <i>￥</i>
          <i class="nowPrice">{{ details.nowPrice }}</i>
          <span>
            ￥
            <i class="scPrice">{{ details.marketPrice }}</i>
          </span>
        </div>
        <div class="name">
          <!---->
          <!---->
          {{  }}
        </div>
        <div class="des">
          <span>运费:5元</span>
          <span>累计销售:<i>236</i>笔</span>
          <span>綦江</span>
        </div>
        <div class="des2">
          <div class="service">服务</div>
          <div class="serviceCon">
            <span>新品 · 7天无理由 · 72小时内发货</span>
            <span
              >由
              <i style="color: rgb(24, 159, 215)"> {{details.storeName}} </i>
              发货 ,并提供售后服务
            </span>
          </div>
        </div>
      </div>
      <div class="det-discount">
        <a class="discount">
          <div class="left">领劵</div>
          <div class="right">
            <p>
              <span class="coupon-span">暂无优惠券</span>
              <!----><!---->
            </p>
            <!---->
          </div>
        </a>
        <a class="discount">
          <div class="left">活动</div>
          <div class="right activity">
            <!----><!---->
            <p>暂无优惠活动</p>
          </div>
        </a>
        <!----><!---->
      </div>
      <div class="det-type">
        <div>
          <div class="left">已选</div>
          <div class="right type">
            <p>{{Detail.stocks[0].attribute}},<i>1</i>件</p>
          </div>
        </div>
        <div>
          <div class="left">送至</div>
          <div class="right">
            <p>地址</p>
            <span>现货</span>
          </div>
        </div>
        <div>
          <div class="left">运费</div>
          <div class="right" style="background: none">
            <p>在线支付5元</p>
          </div>
        </div>
      </div>
      <div class="det-evaluate">
        <div class="det-evaluate-title">
          <p>评价<i id="pj_num">0 + </i></p>
          <div class="clear"></div>
          <div class="type" style="display: none">
            <span>个头饱满</span>
            <span>品质优选</span>
            <span>酸甜可口</span>
            <span>个大质优</span>
          </div>
        </div>
        <!---->
        <div class="comment">暂无评价</div>
      </div>
      <div class="det-questions" style="display: none">
        <div class="det-questions-title">
          <p>问答</p>
        </div>
        <div class="det-questions-body">
          <a href="">
            <p>10斤猕猴桃大概多少个？</p>
            <span>2个回答</span>
          </a>
          <a href="">
            <p>绿心的猕猴桃好还是红星的猕猴桃好能嗯嗯嗯嗯嫩了？</p>
            <span>2个回答</span>
          </a>
        </div>
        <a href="" class="more">查看全部评价</a>
      </div>
      <div class="det-shop">
        <div class="shop-div-top">
          <div class="shop-logo" style="width: 0.8rem">
            <img
              src="https://caiba-produce.oss-cn-beijing.aliyuncs.com//static/upload/2c90bd11723b071001723efcb63e0089/hotel/20200523/微信图片_20200523094532.png"
              alt=""
            />
          </div>
          <div class="shop-name">
            <p class="dpName">{{details.storeName}}</p>
            <p>
              综合体验
              <span>
                <van-rate v-model="value" allow-half void-icon="star" void-color="#eee" />
              </span>
            </p>
          </div>
          <div class="shop-top-more">
            <a href=""
              ><img
                src=""
                alt=""
            /></a>
          </div>
        </div>
        <div class="shop-div-list">
          <div>
            <p>212</p>
            <span>关注人数</span>
          </div>
          <div>
            <p>1123</p>
            <span>全部商品</span>
          </div>
          <div>
            <p>评价 <span>5.00</span></p>
            <p>物流 <span>5.00</span></p>
            <p>售后 <span>5.00</span></p>
          </div>
        </div>
        <div class="shop-div-top-list-a"><a>联系客服</a><a>进店逛逛</a></div>
      </div>
      <div class="det-img" >
        <p v-for="(item,index) in Detail.galleries" :key="index">
          <img :src="`https://caiba-produce.oss-cn-beijing.aliyuncs.com`+item.path" alt="">
        </p>
        
      </div>
        <van-sku
          v-model="show"
          :sku="sku"
          :goods="goods"
          :goods-id="goodsId"
          :hide-stock="sku.hide_stock"
          :hide-selected-text="sku.hide_selected_text"
          @add-cart="onAddCartClicked"
          @buy-clicked="onBuyClicked"
          ref="getsku"
        />
      <!----><!---->
    </div>
  </div>
</template>

<script>
import request from "../utils/request.js";
export default {
  data() {
    return {
      details: '',//首页数据
      Detail:null,//详情页数据
      Product:[],
      value: 5,//星级数据
      current: 0,
      show: false,
      sku: {
        tree: [
          {
            k: "规格", // skuKeyName：规格类目名称
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "", // skuValueName：规格值名称
                imgUrl: "", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: "", // 用于预览显示的规格类目图片
              },
            ],
          },
        ],
        hide_stock: false,
        price: "0",
        stock_num: 0,
        none_sku: true,
        hide_selected_tex: false,
      },
      goods: {
        picture: "",
      },
      goodsId:"",
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    // handleCart() {
    //   show = !show;
    // },
    onAddCartClicked(skuData) {
      console.log(skuData);
      this.show=false;
      for(let i=0;i<this.Product.length;i++){
        for(let j=0;j<this.Product[i].products.length;j++){
          if(skuData.goodsId==this.Product[i].products[j].id){
            var good=this.Product[i].products[j]
            console.log(good)
          }
        }
      }
      this.$store.commit("good/goodDetailMut",good)
      this.$set(good, "num",skuData.selectedNum);
      this.$store.commit("good/goodAddMut",good)
    },
    onBuyClicked(skuData){
      console.log(skuData);
      for(let i=0;i<this.Product.length;i++){
        for(let j=0;j<this.Product[i].products.length;j++){
          if(skuData.goodsId==this.Product[i].products[j].id){
            var good=this.Product[i].products[j]
            console.log(good)
          }
        }
      }
      this.$store.commit("good/goodDetailMut",good)
      this.$set(good, "num", skuData.selectedNum);
      this.$store.commit("good/goodAddMut",good)
      this.$router.push('/cart')
    }
  },
  created() {
    let  {id}  = this.$route.params;
    this.goodsId={id}.id
    console.log({id})
    console.log(this.goodsId)
    //首页数据
    request
      .get("/gct/web/front/index/productList?pageSize=10&pageNo=1")
      .then((res) => {
        this.Product = res.data.data;
        console.log(this.Product)
        for(let i=0;i<this.Product.length;i++){ 
          if({id}.id==this.Product[i].id){
            this.details=this.Product[i]
            return 1
          }else{
             for(let j=0;j<this.Product[i].products.length;j++){
              if({id}.id==this.Product[i].products[j].id){
                // console.log(1)
                this.details=this.Product[i].products[j];
                console.log(this.details)
              }
            }
          }
        }
        // console.log(this.Product);
      }),
      //详情页数据
      request
      .get(`/gct/web/front/product/product?productId=${id}`)
      .then((res)=>{
        this.Detail=res.data.data;
        console.log(this.Detail)
        this.goods.picture = `https://caiba-produce.oss-cn-beijing.aliyuncs.com//${this.Detail.stocks[0].img}`;
        this.sku.price = this.Detail.stocks[0].price;
        this.sku.stock_num = this.Detail.stocks[0].stock;
      })
  },
};
</script>

<style scoped src="../assets/css/Detail.css">
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>